<template>
  <div class="login">
    <div class="login-logo">
      <img src="../../assets/login.png" alt="">
    </div>
    <div class="login-content">
      <div class="form">
        <div class="title">欢迎登录创思设备管理系统</div>
        <div class="form-title">邮箱</div>
        <el-input class="input" v-model="mailbox" @blur="handelBlur"/>
        <div class="checking" v-if="isShow">请输入正确的邮箱格式</div>
        <div class="form-title">密码</div>
        <el-input class="input" v-model="password" type="password" show-password/>
        <div class="is-remenber">
          <el-checkbox class="remenber" v-model="isKeep" label="记住密码" size="large" />
          <el-link class="forgotten" target="_blank" :underline="false" @click="handelForgot">忘记密码</el-link>
        </div>
        <button class="button" @click="loginClick" >登录</button>
        <div class="no-account">
          <span>你还没有账号？</span><span class="register" @click="goRegister">注册账号？</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useStore } from 'vuex'
import router from '../../router/index.js'

import localCache from '../../utils/cache'
import { isMailbox , debounce } from '../../utils/formValidation'

export default {
  setup() {
    const store = useStore()

    // 如保存账号则获取账号密码否则赋值空字符串
    const cacheMailbox = localCache.getCache('mailbox') || ''
    const cachePassword = localCache.getCache('password') || ''
    const mailbox = ref(cacheMailbox)
    const password = ref(cachePassword)

    const isKeep = ref(true)
    const isShow = ref(false)

    // 处理邮箱验证
    const handelBlur = (event) => {
      isShow.value = !isMailbox(event.target.value)
    }
    // 登录逻辑
    const loginFun = () => {
      // 1.验证邮箱格式
      if (isShow.value) return
      // 2.判断是否记住密码,保存账号密码
      if (isKeep.value) {
        localCache.setCache('mailbox',mailbox.value)
        localCache.setCache('password',password.value)
      } else {
        localCache.deleteCache('mailbox')
        localCache.deleteCache('password')
      }
      // 3.登录
      store.dispatch('login/LoginAction',{ mailbox:mailbox.value , password:password.value })
    }
    // 防抖
    const loginClick = debounce(loginFun,500)
    // 忘记密码
    const handelForgot = () => {
      router.push('/fgPassword')
    }
    // 注册界面
    const goRegister = () => {
      router.push('/register')
    }
    return {
      mailbox,
      password,
      isKeep,
      isShow,
      loginClick,
      goRegister,
      handelBlur,
      handelForgot,
      goRegister
    }
  }
}
</script>

<style lang="less">
.login{
  width: 14.40rem;
  height: 10.24rem;
  .login-logo{
    float: left;
    position: relative;
    width: 50%;
    height: 100%;
    background: rgba(154, 154, 235, 0.5);
      img{
        position: absolute;
        left: 0.99rem;
        top: 2.93rem;
        width:5.67rem;
        height: 3.39rem;
      }
  }
  .login-content{
    float: right;
    width: 50%;
    height: 100%;
    .form{
      position: absolute;
      top: 2.24rem;
      left: 8.47rem;
      width: 4.46rem;
      .title{
        margin-bottom: 0.325rem;
        text-align: center;
        font-weight: 400;
        font-size: 0.32rem;
      }
      .form-title{
        font-weight: 400;
        font-size: 0.24rem;
      }
      .input{
        margin: 0.198rem 0;
        width: 4.46rem;
        height: 0.55rem;
        font-size: 0.22rem;
        border-color: #4D4DDB;
      }
      .checking{
        margin-top: -0.198rem;
        color: red;
        font-size: 0.12rem;
      }
      .is-remenber{
        display: flex;
        justify-content: space-between;
        height: 0.27rem;
        .remenber{
          width: 0.99rem;
          height: 0.27rem;
          line-height: 0.27rem;
        }
        .forgotten{
          width: 0.99rem;
          height: 0.27rem;
          line-height: 0.27rem;
        }
      }
      .button{
        display: block;
        margin-top: 0.24rem;
        width: 100%;
        height: 0.55rem;
        background-color: #1E1E1E;
        color: #FFFFFF;
        border-radius: 8px;
      }
      .no-account{
        margin-top: 0.66rem;
        text-align: center;
        .register{
          color: #4D4DDB;
          cursor:pointer;
        }
      }
    }
  }
}
</style>